<template>
	<view class="container">

		<!-- 推举资源 -->
		<!-- <view class="list-two-w" >
			<view class="list-two-list" v-for="(choos ,index) in choose" :key="index">
				<view class="list-two-img">
					<image class="fengrui-img" :src="choos.chart"></image>
				</view>
			</view>
		</view> -->

		<!-- 热评 写死的一句话 -->
		<view class="review">
			青春里的温柔，一定与你有关
		</view>

		<!-- 微信小程序 流量主格子广告 目前为隐藏状态-->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="adContainer" v-if="WxAds.length>0">
		  <ad :unit-id="WxAds[5].value" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white"></ad>
		</view> -->
		<!-- #endif -->

		<!-- 资源分类 选项卡 -->

		<view :class="sollTopClass == 1 ? 'ResourceClass' :'TopResourceClass' ">
			<scroll-view class="" scroll-x="true" @scroll="scroll" style="white-space: nowrap;">
				<view :class="active === index ? 'activeResourceClassVi':'ResourceClassVi'"
					v-for="(recClass, index) in ResourcesCateLis" :key="index" @tap="activeRecClass(index)">
					{{ recClass.resources_cate_introduction }}
				</view>
			</scroll-view>
		</view>
		<!-- 资源列表 -->
		<view class="" v-for="(item ,index) in activeList" :key="index">
			<view class="res-list">
				<view class="re-title">
					{{ item.resources_title }}
				</view>
				<view class="res-abstract">
					{{ item.resources_introduce }}
				</view>
				<view class="re-btton">
					<button class="re-btn-l" @tap="downSever(index)">立即下载</button>
					<button class="re-btn-h" open-type="share">分享转发</button>
				</view>
			</view>
			<!-- 微信视频广告 每个 4哥出现一次 -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="lis-one-ad">
				<ad v-if="(index +1) % 5 == 0" :unit-id="WxAds[3].value" ad-type="video" ad-theme="white"></ad>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				// 文章列表
				choose: [],
				// 分类列表
				page: 1,
				pageSize: 10,
				resources: [],
				// 微信流量主广告
				// #ifdef  MP-WEIXIN
				WxAds: [],
				//#endif
				// 滑动
				scrollTop: 0,
				// 资源栏目分类
				ResourcesCateLis: [],
				active: 0,
				activeList: [],
				sollTopClass: 1,
				rIndex: -1
			}
		},
		onLoad() {
			this.getResourcesList();
			this.getResourcesCate();
		},
		// 监听触底
		onReachBottom() {
			this.page = this.page + 1;
			this.getResourcesList();
		},
		onPageScroll: function(e) {
			// console.log(e.scrollTop)
			var that = this;
			if (e.scrollTop > 100) {
				that.sollTopClass = 2;
			} else {
				that.sollTopClass = 1;
			}
		},
		methods: {
			// 获取资源分类
			getResourcesCate: function() {
				var that = this;
				var postData = {}
				//传输信息
				app.request('/Resources/getResourcesCateList', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							that.ResourcesCateLis = res.data.data;
							// console.log(that.ResourcesCateLis)
							// that.getResourcesList(0,that.activeList[0]);
						} else {

						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},

			//获取资源列表
			getResourcesList: function() {
				var that = this;
				var postData = {
					page: that.page,
					pageSize: that.pageSize
				}
				//传输信息
				app.request('/Resources/getResources', postData, 'GET',
					function(res) {
						if (res.data.code == 1) {
							// that.resources = res.data.data
							that.resources = that.resources.concat(res.data.data);
							// console.log(that.resources[0].resources_catid)
							var fristCatid = that.resources[0].resources_catid;
							var activeList = that.resources.filter(function(x) {
								return x.resources_catid === fristCatid;
							});
							that.activeList = activeList;
							console.log(that.activeList)
						} else {
							uni.showToast({
								icon: "none",
								title: "暂无数据"
							})
						}
						console.log('成功');
						console.log(res);
					},
					function(res) {
						console.log('失败');
						console.log(res);
					},
					function(res) {
						console.log('完成');
						console.log(res);
					}
				);
			},
			// 条件编译 微信小程序 流量主广告
			// 	//从缓存获取广告 0是Banner广告 1是激励式广告 2插屏广告 3视频广告 4视频贴片广告 5格子广告

			// 获取资源下载弹窗
			downSever: function(e) {
				var that = this;
				// console.log(e)
				// console.log(that.resources[e].resources_link)
				if (!that.resources[e].resources_link) {
					uni.showToast({
						icon: 'loading',
						title: '资源错误或为空',
						duration: 1500
					});
				} else {
					uni.showModal({
						title: '获取资源成功',
						content: that.resources[e].resources_introduce,
						cancelText: '取消下载',
						confirmText: '复制链接',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								that.getVideoAd();
								that.rIndex = e;
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			},

			// 资源分类选项卡
			activeRecClass: function(index) {
				var that = this;
				that.active = index;
				var activeCatid = that.ResourcesCateLis[that.active].resources_catid;
				// var activeList = that.resources;
				var activeList = that.resources.filter(function(x) {
					return x.resources_catid === activeCatid;
				});
				that.activeList = activeList;

			},

		},
		// 分享小程序界面
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '资源分享',
				path: '/pages/resources/resources',
				imageUrl: ''
			}

		},
	}
</script>

<style>
	/* 资源分类列表 */
	.TopResourceClass {
		position: fixed;
		top: -2rpx;
		left: 0rpx;
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
		z-index: 9;
	}

	.activeResourceClassVi {
		height: 70rpx;
		border-radius: 10rpx;
		width: 180rpx;
		background: linear-gradient(to right, #4382eb, #06bdfe);
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		margin-right: 40rpx;
		display: inline-block;
	}

	.ResourceClassVi {
		height: 70rpx;
		border-radius: 10rpx;
		width: 180rpx;
		background-color: #e4e4e4;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		margin-right: 40rpx;
		display: inline-block;
	}

	.Resource-class {
		/* border: 1px red solid; */

	}

	/* 资源列表 */
	button::after {
		border: 1px solid rgba(0, 0, 0, 0);
	}

	uni-button {
		margin-left: unset;
		margin-right: unset;
	}

	.re-btn-h {
		background: linear-gradient(to right, #fa434c, #f99095);
		color: #FFFFFF;
		border-radius: 50rpx;
		width: 210rpx;
		margin-left: 40rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
	}

	.re-btn-l {
		background: linear-gradient(to right, #4382eb, #06bdfe);
		color: #FFFFFF;
		border-radius: 50rpx;
		width: 210rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 24rpx;
	}

	.re-btton {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 30rpx;
	}

	.res-abstract {
		font-size: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		color: #ADADAD;
		margin-top: 20rpx;
	}

	.re-title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.res-list {
		margin: 36rpx 0rpx 60rpx 0rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx;
		box-shadow: #e8e8e8 0px 5px 23px;
	}

	/* 推举资源 */
	.list-two-title {
		font-size: 30rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-top: 16rpx;
	}

	.list-two-img {
		width: 100%;
		height: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.list-two-list {
		border-radius: 20rpx;
		overflow: hidden;
		flex-shrink: 0;
		width: 48%;
		margin-bottom: 60rpx;
	}

	.list-two-w {
		margin: 50rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}

	/* 热评 */
	.review {
		background-color: #f9f9f9;
		padding: 32rpx;
		margin: 34rpx 0;
		border-radius: 10rpx;
		color: #ADADAD;
		font-size: 24rpx;
	}

	/* 标题 */
	.title-h {
		font-size: 34rpx;
	}

	/* 页面属性 */
	.container {
		padding: 40rpx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}
</style>
